<template>
    <div class="com_box pd_20" style="margin-top:12px;padding-bottom:0" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)">
        <ViewData ref="view_data" />
        <AddUser ref="add_user" @getDataList="getDataList" />
        <TagList ref="tag_ref" @getDataList="getDataList" />
        <ExportTask ref="task_ref" />
        <div class="flexbox flexcenter flexbetween">
            <div class="time_title">达人列表</div>
            <div class="flexbox flexcenter">
                <el-tooltip content="任务列表" placement="top">
                    <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg" style="cursor: pointer;" @click="openTask">
                        <path d="M9 10.5C9 9.94772 9.44772 9.5 10 9.5H22C22.5523 9.5 23 9.94772 23 10.5V24C23 24.5523 22.5523 25 22 25H10C9.44772 25 9 24.5523 9 24V10.5Z" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                        <path d="M12 8.5C12 7.94772 12.4477 7.5 13 7.5L19 7.5C19.5523 7.5 20 7.94772 20 8.5V10.5C20 11.0523 19.5523 11.5 19 11.5H13C12.4477 11.5 12 11.0523 12 10.5V8.5Z" fill="white" stroke="#616C85" stroke-width="2" stroke-linecap="round" />
                        <path d="M16 15V21M16 21L13.5 19M16 21L18.5 19" stroke="#616C85" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                </el-tooltip>
                <el-input placeholder="达人名称" size="small" clearable suffix-icon="el-icon-search" @change="getDataList" v-model="subForm.blogger_name" style="width:216px;margin-left:12px">
                </el-input>
                <el-button plain size="small" class="plain_blue" @click="downloadAll('sql')" style="margin-left:12px" v-if="has_check.length==0">
                    <div class="flexbox flexcenter flexjust">
                        <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        导出全部
                    </div>
                </el-button>
                <el-button plain size="small" class="plain_blue" @click="downloadAll('id')" style="margin-left:12px" v-else>
                    <div class="flexbox flexcenter flexjust">
                        <svg width="16" height="16" viewBox="0 0 16 16" stroke='#4475FF' class="stroke_svg btn_svg" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M14 9C14 10.875 12.6667 14 8 14C3.33333 14 2 10.875 2 9" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M8 2V11" stroke="inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                            <path d="M4 6L8 2L12 6" stroke="#inherit" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round" />
                        </svg>
                        导出已选({{has_check.length}})条
                    </div>
                </el-button>
                <el-button type="primary" size="small" icon="el-icon-plus" style="margin-left:12px" @click="addUser">
                    达人账号
                </el-button>
            </div>
        </div>
        <el-table :data="tableData" class="com_table fx_table source_table" v-if="total>0" ref="mtTable" max-height="700" :row-key="(row)=>{ return row.id}" @sort-change='sortChange' @selection-change="selectTable">
            <el-table-column type="selection" width="55" align="center" :reserve-selection="true" fixed="left">
            </el-table-column>
            <el-table-column prop="segmentation_during" label="发布达人" width="250" fixed="left">
                <template slot-scope="scope">
                    <div class="flexbox flexcenter">
                        <img :src="scope.row.xt_logo" alt="" class="bz_head">
                        <div class="bz_info">
                            <div class="fx_text1">{{scope.row.blogger_name}}</div>
                            <div class="fx_text2">抖音号：{{scope.row.dy_num}}</div>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="link" label="星图链接" width="100">
                <template slot-scope="scope">
                    <a :href="scope.row.star_main_url" target="_blank" class="link_item flexbox flexjust flexcenter red_link">
                        <img src="@/assets/img/feixing1.svg" alt="">
                    </a>
                </template>
            </el-table-column>
            <el-table-column prop="tags_relation" label="账号类型" min-width="180">
                <template slot-scope="scope">
                    <div class="flexbox flexcenter is_edit">
                        <span class="type_text" v-if="scope.row.tags_relation">{{scope.row.tags_relation}}</span>
                        <span v-else>--</span>
                        <span class="icon_btn flexbox flexcenter flexjust" @click="isEdit(scope.row)">
                            <img src="@/assets/img/edit_icon2.svg" alt="">
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="blogger_fans" label="粉丝数" min-width="110">
                <template slot-scope="scope">
                    {{scope.row.blogger_fans | unitWan}}
                </template>
            </el-table-column>
            <el-table-column prop="price_20_60" label="21s-60s星图价格" min-width="180">
                <template slot-scope="scope">
                    ￥{{scope.row.price_20_60}}
                </template>
            </el-table-column>
            <el-table-column prop="price_60" label="60s+星图价格" min-width="180">
                <template slot-scope="scope">
                    ￥{{scope.row.price_60}}
                </template>
            </el-table-column>
            <el-table-column prop="nlzb" label="粉丝年龄占比" min-width="180">
                <template slot-scope="scope">
                    <el-popover width="140" trigger="hover">
                        <div class="hover_layer">
                            <div class="hover_title">粉丝年龄占比</div>
                            <div class="layer_item flexbox flexcenter flexbetween" v-for="item in scope.row.ageArr" :key="item.name">
                                <span class="layer_text">{{item.name}}</span>
                                <span class="blue_hover">{{item.value}}%</span>
                            </div>
                        </div>
                        <div class="hover_box" slot="reference">
                            <div class="hover_list">
                                <template v-for="(item,index) in scope.row.ageArr">
                                    <div class="hover_item flexbox flexbetween flexcenter" v-if="index<3" :key="item.name">
                                        <span>{{item.name}}</span>
                                        <span class="blue_hover">{{item.value}}%</span>
                                    </div>
                                </template>
                            </div>
                            <div class="hover_text">鼠标移入查看全部</div>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="bdrq" label="八大人群画像占比" min-width="180">
                <template slot-scope="scope">
                    <el-popover width="140" trigger="hover">
                        <div class="hover_layer">
                            <div class="hover_title">八大人群画像占比</div>
                            <template v-for="item in scope.row.jobArr">
                                <div class="layer_item flexbox flexcenter flexbetween" :key="item.value">
                                    <span class="layer_text">{{item.name}}</span>
                                    <span class="blue_hover">{{item.value}}%</span>
                                </div>
                            </template>
                        </div>
                        <div class="hover_box" slot="reference">
                            <div class="hover_list">
                                <template v-for="item in scope.row.jobArr">
                                    <template>
                                        <div class="hover_item flexbox flexbetween flexcenter" :key="item.value">
                                            <span class="hover_max">{{item.name}}</span>
                                            <span class="blue_hover">{{item.value}}%</span>
                                        </div>
                                    </template>
                                </template>
                            </div>
                            <div class="hover_text">鼠标移入查看全部</div>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <el-table-column prop="bdrq" label="星图播放量" min-width="180">
                <template slot-scope="scope">
                    <template v-if="scope.row.img_xt_last_15_videos_play.length>0">
                        <el-popover width="140" trigger="hover">
                            <div class="hover_layer">
                                <div class="hover_title">星图播放量</div>
                                <div class="layer_over">
                                    <template v-for="item in scope.row.img_xt_last_15_videos_play">
                                        <div class="layer_item flexbox flexcenter flexbetween" :key="item.create_time">
                                            <span class="layer_text">{{item.create_time}}</span>
                                            <span class="blue_hover">{{item.play_count}}w</span>
                                        </div>
                                    </template>
                                </div>
                            </div>
                            <div class="hover_box" slot="reference">
                                <div class="hover_list">
                                    <template v-for="item in scope.row.img_xt_last_15_videos_play">
                                        <template>
                                            <div class="hover_item flexbox flexbetween flexcenter" :key="item.create_time">
                                                <span class="hover_max">{{item.create_time}}</span>
                                                <span class="blue_hover">{{item.play_count}}w</span>
                                            </div>
                                        </template>
                                    </template>
                                </div>
                                <div class="hover_text">鼠标移入查看全部</div>
                            </div>
                        </el-popover>
                    </template>
                    <template v-else>
                        <div class="hover_box no_data">暂无数据</div>
                    </template>
                </template>
            </el-table-column>
            <el-table-column prop="" label="飞瓜数据" width="110" fixed="right">
                <template slot-scope="scope">
                    <div class="view_data" @click="viewData(scope.row)">查看</div>
                </template>
            </el-table-column>
        </el-table>
        <div class="flexbox flexcenter flexcolumn flexjust" style="height:790px" v-else>
            <img src="@/assets/img/null_icon.svg" alt="">
            <div class="font_13 color_03">暂无数据，请在上方选择相应条件后进行查询</div>
        </div>
        <div class="page_box flexbox flexcenter" v-if="total>0">
            <el-pagination background layout="total, prev, pager, next,sizes" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="subForm.page" :page-size="subForm.limit" :page-sizes="[20, 50, 100, 200]" :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
import ViewData from "./ViewData";
import AddUser from "./AddUser";
import TagList from "./TagList";
import ExportTask from "./ExportTask";
export default {
    components: {
        ViewData,
        AddUser,
        TagList,
        ExportTask
    },
    props: ["subForm", "tableData", "total","sql"],
    name: "",
    data() {
        return {
            loading:false,
            has_check:[]
        };
    },
    created() {},
    beforeDestroy() {},
    methods: {
        getDataList() {
            this.$emit("getDataList");
        },
        viewData(row) {
            this.$refs.view_data.getData(row);
        },

        addUser() {
            this.$refs.add_user.getData();
        },

        isEdit(row) {
            this.$refs.tag_ref.getData(row);
        },
        openTask(){
            this.$refs.task_ref.getData();
        },
        // 表格选中
        selectTable(row){
            this.has_check = row.map(item=>{return item.id})
        },
        //导出
        downloadAll(types) {
            this.$confirm("审核人：钟佳儒", "审核确定", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    this.loading = true;
                    let subForm = JSON.parse(JSON.stringify(this.subForm));
                    delete subForm.field
                    delete subForm.limit
                    delete subForm.order
                    delete subForm.page
                    if(types=='sql'){
                        subForm.content = this.sql;
                    }else{
                        subForm.content = this.has_check.toString()
                    }
                    subForm.type = types;
                    subForm.verify_user = 10099
                    const { data: res } = await this.$http.post(
                        "fxdata/sellibrary/exportData",
                        subForm
                    );
                    if (res.code !== 200) {
                        this.loading = false;
                        this.$message.error(res.msg);
                        return;
                    } else {
                        this.loading = false
                        this.$refs.mtTable.clearSelection();
                        console.log(res);
                    }
                })
                .catch(() => {});
        },
        // 每页显示多少条数据
        handleSizeChange(val) {
            this.subForm.limit = val;
            this.subForm.page = 1;
            this.getDataList();
        },
        // 当前页切换
        handleCurrentChange(val) {
            this.subForm.page = val;
            this.getDataList();
        },
    },
    
};
</script>


<style scoped>
.time_title {
    font-size: 16px;
    color: #17233d;
    line-height: 22px;
    position: relative;
    font-weight: bold;
}
.page_box {
    padding: 0;
}
.com_table {
    margin-top: 20px;
}

.bz_info {
    margin-left: 12px;
}
.bz_head {
    width: 48px;
    height: 48px;
    border-radius: 50%;
}
.fx_text1 {
    font-size: 14px;
    color: #17233d;
    height: 20px;
    line-height: 20px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.fx_text2 {
    font-size: 13px;
    line-height: 18px;
    color: #b4b7bd;
    height: 18px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    margin-top: 2px;
}

.type_text {
    font-size: 13px;
    color: #616c85;
    padding: 5px 10px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    display: inline-block;
    line-height: 18px;
}

.link_item {
    height: 32px;
    font-size: 14px;
    background: rgba(165, 177, 209, 0.08);
    border-radius: 4px;
    padding: 0 8px;
    text-decoration: none;
}
.red_link {
    color: #fe346e;
}
.green_link {
    color: #5bb647;
}
.hover_box {
    width: 132px;
    border: 1px solid #ebebeb;
    border-radius: 2px;
    padding: 6px 8px 8px 8px;
    cursor: pointer;
}
.hover_max {
    height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.blue_hover {
    flex-shrink: 0;
    color: #4475ff;
}
.hover_list {
    height: 72px;
    padding-bottom: 2px;
    border-bottom: 1px solid #ebebeb;
    height: 72px;
    overflow: hidden;
}
.hover_item {
    font-size: 14px;
    color: #616c85;
    height: 20px;
    line-height: 20px;
    margin: 2px 0;
}
.hover_text {
    font-size: 13px;
    color: #b4b7bd;
    margin-top: 4px;
    line-height: 18px;
}
.no_data {
    text-align: center;
    color: #b4b7bd;
    height: 110px;
    line-height: 100px;
}
.layer_over {
    max-height: 300px;
    overflow-y: auto;
    margin: 0 -12px;
    padding: 0 12px;
}
.layer_item {
    height: 28px;
}
.hover_title {
    font-size: 14px;
    line-height: 20px;
    color: #616c85;
    margin-bottom: 10px;
}
.layer_text {
    padding-left: 12px;
    font-size: 14px;
    color: #17233d;
    position: relative;
}
.layer_text::after {
    position: absolute;
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #17233d;
    left: 0;
    top: 50%;
    margin-top: -3px;
}
.view_data {
    width: 68px;
    height: 32px;
    line-height: 32px;
    background: rgba(165, 177, 209, 0.1);
    border-radius: 4px;
    text-align: center;
    font-size: 14px;
    color: #4475ff;
    cursor: pointer;
}
/deep/ .com_table.fx_table.el-table td {
    padding: 8px 0;
}
.icon_btn {
    display: none;
    margin-left: 5px;
}
.is_edit:hover .icon_btn {
    display: flex;
}
</style>



